@import "_function";
@import "_icons";

body {
  .header {
    text-align: center;
    overflow: hidden;
    .c(#fff);
    .bc(#000);
    .h(88);
    .lh(88);
    a {
      .w(18);
      .h(34);
      float: left;
      img {
        .ml(28);
        .mt(32);
        width: 100%;
        height: 100%;
      }
    }
    span {
      .fs(30);
    }
    & > img {
      .w(36);
      .h(30);
      float: right;
      .mt(32);
      .mr(42);
    }
  }
  .content {
    .mt(118);
    .mr(30);
    .pl(30);
    .c(#333333);
    .details {
      h2 {
        .fs(30);
        .mb(18);
      }
      p {
        .h(48);
        .lh(48);
        .fs(24);
        border-bottom: 1px solid #c9c9c9;
        span {
          &:last-child {
            float: right;
            .pr(14);
          }
        }
      }
    }
    .pay-ways {
      .mt(40);
      h2 {
        .fs(30);
      }
      p {
        .mt(30);
        .fs(30);
        img {
          vertical-align: middle;
          &:nth-of-type(1) {
            .w(52);
            .h(52);
          }
        }
        label {
          input[type=radio] {
            display: none;
            & + span.icon-pay {
              .fr;
              .db;
              .w(38);
              .h(36);
              .bs(38, 72);
              .bp(0, 0);
            }
            &:checked+span.icon-pay{
              .bp(0, -36);
            }
          }
        }
        span {
          display: inline-block;
          .ml(30);
          .h(52);
          .lh(52);
        }
      }
    }
    .pay-now {
      .mt(590);
      float: right;
      span {
        .fs(30);
        &:nth-of-type(2) {
          .c(#ff0000);
        }
        &:nth-of-type(3) {
          display: inline-block;
          .w(190);
          .h(76);
          .lh(76);
          text-align: center;
          .c(#fff);
          .bc(#ff0000);
        }
      }
    }
  }
}